<template>
	<view class="seniorityBox">
		<view class="seniorityBoxTab">
			<view class="seniorityBoxTab_th">
				<view>
					总实收在10月11号开始累计, 每期结算完刷新。
				</view>
				<view>
					每满5000扣减1个分红资格
				</view>
			</view>
			<view class="seniorityBoxTab_td">
				<view>
					<view>总消费补贴资格数</view>
					<view>{{ seniorityCount.TOTALFH || 0 }}</view>
				</view>
				<view>
					<view>有效消费补贴资格数</view>
					<view>{{ seniorityCount.VALIDFH || 0 }}</view>
				</view>
				<view>
					<view>总实收</view>
					<view>{{ achive.totalRealBonus || 0}}</view>
				</view>
				<view>
					<view>总扣减资格数</view>
					<view>{{ achive.deductSeniorityNumbers || 0}} </view>
				</view>
			</view>
		</view>
		<view class="seniorityDetails">
			<view class="seniorityDetailsTitle">
				<view :class="{'active':activeIndex==1}" @click="activeIndexChange(1)">有效资格</view>
				<view :class="{'active':activeIndex==2}" @click="activeIndexChange(2)">无效资格</view>
			</view>
			<view class="seniorityDetailsBox" v-if="activeIndex==1" v-for="(item,ind) in effectiveSeniority">
				<view>
					<view>支付时间</view>
					<view>{{item.paymentTime || '暂无'}}</view>
				</view>
				<view>
					<view>资金金额</view>
					<view>{{item.goodsAmount || '暂无'}}</view>
				</view>
				<view>
					<view>资格数</view>
					<view>{{item.seniorityNumber || '暂无'}}</view>
				</view>
				<view>
					<view>扣减数</view>
					<view>{{item.deductSeniorityNumber || '暂无'}}</view>
				</view>
			</view>
			<view class="seniorityDetailsBox" v-if="activeIndex==2" v-for="(item,ind) in noneffectiveSeniority">
				<view>
					<view>支付时间</view>
					<view>{{item.paymentTime || '暂无'}}</view>
				</view>
				<view>
					<view>资金金额</view>
					<view>{{item.goodsAmount || '暂无'}}</view>
				</view>
				<view>
					<view>资格数</view>
					<view>{{item.seniorityNumber || '暂无'}}</view>
				</view>
				<view>
					<view>扣减数</view>
					<view>{{item.deductSeniorityNumber || '暂无'}}</view>
				</view>
				<view>
					<view>无效原因</view>
					<view>
						<text v-if="item.seniorityState==-1">过期</text>
						<text v-if="item.seniorityState==-2">封顶</text>
						<text v-if="item.seniorityState==-3">扣减至0</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getMemberAchiveSeniority
	} from "@/api/directSelling"
	export default {
		data() {
			return {
				activeIndex: 1,
				seniorityCount:{},
				achive:{},
				seniorityDetail:[],
				effectiveSeniority:[],
				noneffectiveSeniority:[]
			}
		},
		created() {},
		mounted() {
			this.getMemberAchiveSeniority();
		},
		methods: {
			getMemberAchiveSeniority(){
				getMemberAchiveSeniority().then((res)=>{
					let data=res.data;
					this.seniorityCount=data.seniorityCount;
					this.achive=data.achive;
					this.seniorityDetail=data.seniorityDetail;
					for (let s of this.seniorityDetail) {
					  if (s.seniorityState == 1){
					    this.effectiveSeniority.push(s)
					  }else{
					    this.noneffectiveSeniority.push(s)
					  }
					}
				})
			},
			activeIndexChange(index) {
				this.activeIndex = index;
			}
		}
	}
</script>

<style lang="scss">
	body,
	page {
		background-color: #fff;
	}

	.seniorityBox {
		padding: 20rpx 30rpx;
		box-sizing: border-box;

		.seniorityBoxTab {
			border: 1px solid #ccc;
			width: 100%;
			height: auto;
			background: #f2f2f2;
			font-size: #000;
			font-size: 28rpx;

			.seniorityBoxTab_th {
				line-height: 80rpx;
				text-align: center;
				border-bottom: 1px solid #ccc;
			}

			.seniorityBoxTab_td {
				>view {
					border-bottom: 1px solid #ccc;
					height: 81rpx;
					line-height: 80rpx;
					overflow: hidden;

					>view {
						display: inline-block;
						vertical-align: middle;
						text-align: center;
						height: 80rpx;
					}

					>view:nth-child(1) {
						width: 45%;
						border-right: 1px solid #ccc;
					}

					>view:nth-child(2) {
						width: calc(55% - 2rpx);
						background: #fff;
					}
				}
			}
		}
	}

	.seniorityDetails {
		margin-top: 30rpx;

		.seniorityDetailsTitle {
			text-align: center;
			border: 1px solid $theme-color;

			>view {
				display: inline-block;
				vertical-align: middle;
				height: 100rpx;
				line-height: 100rpx;
				width: 50%;
			}

			>view.active {
				background: $theme-color;
				color: #fff;
			}
		}

		.seniorityDetailsBox {
			margin-top: 0rpx;
			border: 1px solid #ccc;
			padding: 0 30rpx;
			font-size: 28rpx;
			color: #000000;
			border-radius: 10rpx;

			>view {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 100rpx;
				line-height: 100rpx;
			}
		}
	}
</style>
